<template>
  <!-- 弹框选择时间或日期组件 -->
  <van-popup v-model="showPicker" position="bottom">
    <van-datetime-picker
      v-model="currentDate"
      type="time"
      :min-hour="minHour"
      :max-hour="maxHour"
      :min-minute="minMinute"
      :max-minute="maxMinute"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script>
import moment from "moment";

export default {
  props: {
    // 可选择的最小时间，格式为 10:00 不包括秒
    minTime: {
      default: ""
    },
    // 可选择的最大时间，格式为 10:00 不包括秒
    maxTime: {
      default: ""
    },

    // 时间格式：HH:mm:ss
    format: {
      type: String,
      default: "HH:mm:ss"
    }
  },
  data() {
    return {
      currentDate: "", // 默认日期 当天
      showPicker: false // 弹框是否显示
    };
  },
  computed: {
    // 可选的最小小时
    minHour() {
      let times = this.minTime.split(":") || [];
      return times[0] || 0;
    },
    // 可选的最大小时
    maxHour() {
      let times = this.maxTime.split(":") || [];
      return times[0] || 23;
    },
    // 可选的最小分钟
    minMinute() {
      let times = this.minTime.split(":") || [];
      return times[1] || 0;
    },
    // 可选的最大分钟
    maxMinute() {
      let times = this.maxTime.split(":") || [];
      return times[1] || 59;
    }
  },
  methods: {
    // 从外部打开时间选择器,datetime-回显的时间
    open(datetime) {
      if (datetime) {
        this.currentDate = datetime;
      }
      this.toggle(true);
    },

    // 确认选择某一时刻
    onConfirm(value) {
      // 带上日期的时间，moment无法识别仅有时间的格式
      let datetime = moment().format("YYYY-MM-DD") + " " + value + ":00";
      let dateValue = moment(datetime, moment.ISO_8601).format(
        this.format.toUpperCase()
      );
      this.$emit("callBack", dateValue);
      this.toggle(false);
    },

    toggle(type) {
      this.showPicker = type;
    }
  }
};
</script>